<script setup lang="ts">
import { addJueSeApi } from '@/api/system'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import { reactive } from 'vue'
import { ref } from 'vue'
import { usetreeStore } from '@/stores'
import { yesOrNo } from '../../dictionary'

const treeStore = usetreeStore()
const props = defineProps<{
  isShow: boolean
  title: string
  formInfo: any
  propKeyList: any
}>()
const emit = defineEmits<{
  (e: 'update:isShow', value: boolean): void
  (e: 'getList'): void
}>()

console.log(props.formInfo)

const ruleFormRef = ref<any>()
const form = ref<any>({})
if (props.title === '修改维度属性') {
  form.value = { ...props.formInfo }
  form.value.query_flag = Number(props.formInfo.query_flag)
}

// 表单校验
interface RuleForm {
  prop_column: string
  prop_name: string
  prop_order: string
}
const rules = reactive<FormRules<RuleForm>>({
  prop_column: [{ required: true, message: '请输入属性列名', trigger: 'blur' }],
  prop_name: [{ required: true, message: '请输入属性名称', trigger: 'blur' }],
  prop_order: [{ required: true, message: '请输入排序', trigger: 'blur' }]
})
// 取消
const Cancel = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  emit('update:isShow', false)
}

const saveFormFn = async () => {
  const params = {
    sqlId:
      props.title === '修改维度属性'
        ? JSON.stringify(['dimMgr.updateDimProp'])
        : JSON.stringify(['dimMgr.addDimProp']),
    sqlParam:
      props.title === '修改维度属性'
        ? JSON.stringify([
            [
              {
                prop_column: form.value.prop_column,
                prop_name: form.value.prop_name,
                key_column: form.value.key_column,
                parent_prop: form.value.parent_prop,
                prop_describe: form.value.prop_describe,
                show_val: 0,
                query_flag: form.value.query_flag,
                prop_order: form.value.prop_order,
                dim_id: props.formInfo.dim_id
              }
            ]
          ])
        : JSON.stringify([
            [
              {
                add: 1,
                prop_column: form.value.prop_column,
                prop_name: form.value.prop_name,
                key_column: form.value.key_column,
                parent_prop: form.value.parent_prop,
                prop_describe: form.value.prop_describe,
                show_val: 0,
                query_flag: form.value.query_flag,
                prop_order: form.value.prop_order,
                dim_id: props.formInfo.dim_id
              }
            ]
          ]),
    dbName: ''
  }

  await addJueSeApi(params)
    .then((res: any) => {
      if (res === 'success') {
        emit('getList')
        emit('update:isShow', false)
        ElMessage({ message: '提交成功', type: 'success' })
      } else {
        ElMessage({ message: '提交失败', type: 'error' })
      }
    })
    .catch(() => {
      ElMessage({ message: '提交失败', type: 'error' })
    })
}

// 确定
const Confirm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid) => {
    if (valid) {
      saveFormFn()
    } else {
      ElMessage({ message: '请输入完整信息', type: 'error' })
    }
  })
}
</script>
<template>
  <div>
    <el-dialog :model-value="true" :title="title" @close="Cancel(ruleFormRef)">
      <el-form :model="form" ref="ruleFormRef" :rules="rules" label-width="auto">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="属性列名:" prop="prop_column">
              <el-select
                v-model="form.prop_column"
                clearable
                placeholder="请输入维度名称"
                style="width: 300px"
              >
                <el-option
                  v-for="item in treeStore.columnList"
                  :key="item.column_name"
                  :label="item.column_name"
                  :value="item.column_name"
                  :disabled="propKeyList.includes(item.column_name)"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="属性名称:" prop="prop_name">
              <el-input
                v-model="form.prop_name"
                style="width: 300px"
                placeholder="请输入维表名称"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="键值列名:" prop="key_column">
              <el-select
                v-model="form.key_column"
                clearable
                placeholder="请输入维表主键"
                style="width: 300px"
              >
                <el-option
                  v-for="item in treeStore.columnList"
                  :key="item.column_name"
                  :label="item.column_name"
                  :value="item.column_name"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="父属性列名:" prop="parent_prop">
              <el-select
                v-model="form.parent_prop"
                clearable
                placeholder="请输入父属性列名"
                style="width: 300px"
              >
                <el-option
                  v-for="item in treeStore.columnList"
                  :key="item.column_name"
                  :label="item.column_name"
                  :value="item.column_name"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="属性说明:" prop="prop_describe">
              <el-input
                v-model="form.prop_describe"
                style="width: 300px"
                placeholder="请输入维表主键"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="是否应用维度:" prop="query_flag">
              <el-select v-model="form.query_flag" clearable style="width: 100px">
                <el-option
                  v-for="item in yesOrNo"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="排序:" prop="prop_order">
              <el-input v-model="form.prop_order" type="number" style="width: 100px" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="Cancel(ruleFormRef)">取消</el-button>
          <el-button type="primary" @click="Confirm(ruleFormRef)"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<style scoped></style>
